<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>帮助函数 | BIN-UI-DESIGN</title>
    <meta name="description" content="A Compontnts Lib for Vue3">
    <link rel="preload stylesheet" href="/bin-ui-design/assets/style.c1bcbbc4.css" as="style">
    
    <script type="module" src="/bin-ui-design/assets/app.e7678c4e.js"></script>
    <link rel="preload" href="/bin-ui-design/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/framework.ef1b8cce.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/theme.feefc56e.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/preset.a505c3e9.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/dayjs.min.04d70162.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/index.98f125fd.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/docs_common-api.md.34166aab.lean.js">
    <link rel="icon" href="/bin-ui-design/favicon.ico">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-10b21a41><!--[--><!--]--><!--[--><span tabindex="-1" data-v-adaaf041></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-adaaf041> Skip to content </a><!--]--><!----><header class="VPNav" data-v-10b21a41 data-v-53d5d812><div class="VPNavBar has-sidebar" data-v-53d5d812 data-v-9b495835><div class="container" data-v-9b495835><div class="title" data-v-9b495835><div class="VPNavBarTitle has-sidebar" data-v-9b495835 data-v-e8b3dcd3><a class="title" href="/bin-ui-design/" data-v-e8b3dcd3><!--[--><!--]--><!--[--><img class="VPImage logo" src="/bin-ui-design/logo.svg" alt data-v-8268b5c7><!--]--><!--[-->BIN-UI-DESIGN<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-9b495835><div class="curtain" data-v-9b495835></div><div class="content-body" data-v-9b495835><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-9b495835><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9b495835 data-v-65dcea68><span id="main-nav-aria-label" class="visually-hidden" data-v-65dcea68>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/bin-ui-design/docs/introduction.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bin-ui-design/components/button.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>组件</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-65dcea68 data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8d848982><span class="text" data-v-8d848982><!----><span data-v-8d848982>生态系统</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8d848982><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><div class="items" data-v-a89d4855><!--[--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->资源<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-admin-pro/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-admin-pro<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav-schema/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav-schema<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v3<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-editor-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-editor-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v2<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ace-editor/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ace-editor<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-tree-org/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-tree-org<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->动画库<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-animation<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-keyframe-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-keyframe-animation<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9b495835 data-v-6e555ce1><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-6e555ce1 data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9b495835 data-v-e0d4c2fb data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9b495835 data-v-3ec7766a data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8d848982><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8d848982><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><!----><!--[--><!--[--><!----><div class="group" data-v-3ec7766a><div class="item appearance" data-v-3ec7766a><p class="label" data-v-3ec7766a>Appearance</p><div class="appearance-action" data-v-3ec7766a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-3ec7766a data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-3ec7766a><div class="item social-links" data-v-3ec7766a><div class="VPSocialLinks social-links-list" data-v-3ec7766a data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9b495835 data-v-0a67234a><span class="container" data-v-0a67234a><span class="top" data-v-0a67234a></span><span class="middle" data-v-0a67234a></span><span class="bottom" data-v-0a67234a></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-10b21a41 data-v-eddb4634><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-eddb4634><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-eddb4634><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-eddb4634>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-eddb4634 data-v-b2855fa6><button data-v-b2855fa6>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-10b21a41 data-v-2abe540d><div class="curtain" data-v-2abe540d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-2abe540d><span class="visually-hidden" id="sidebar-aria-label" data-v-2abe540d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>开始</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/introduction.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/changelog.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>变更日志</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>快速上手</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/installation.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>安装</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/usage-sfc.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>在 SFC 中使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/import-on-demand.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>按需引入</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0 has-active" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>指南</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/jsx.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>JSX & TSX</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/color-design.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>色彩设计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/custom-theme.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>调整主题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/common-css.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>通用样式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/common-api.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>帮助函数</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/common-directive.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>组件指令</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/common-transition.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>内置动画</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-10b21a41 data-v-4d31e3f3><div class="VPDoc has-sidebar has-aside" data-v-4d31e3f3 data-v-9f9999b2><!--[--><!--]--><div class="container" data-v-9f9999b2><div class="aside" data-v-9f9999b2><div class="aside-curtain" data-v-9f9999b2></div><div class="aside-container" data-v-9f9999b2><div class="aside-content" data-v-9f9999b2><div class="VPDocAside" data-v-9f9999b2 data-v-1658cfd8><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-1658cfd8 data-v-667990eb><div class="content" data-v-667990eb><div class="outline-marker" data-v-667990eb></div><div class="outline-title" data-v-667990eb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-667990eb><span class="visually-hidden" id="doc-outline-aria-label" data-v-667990eb> Table of Contents for current page </span><ul class="root" data-v-667990eb data-v-d7e7591d><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-1658cfd8></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9f9999b2><div class="content-container" data-v-9f9999b2><!--[--><!--]--><!----><main class="main" data-v-9f9999b2><div style="position:relative;" class="vp-doc _bin-ui-design_docs_common-api" data-v-9f9999b2><div><!----><h1 id="帮助函数" tabindex="-1">帮助函数 <a class="header-anchor" href="#帮助函数" aria-label="Permalink to &quot;帮助函数&quot;">​</a></h1><p>部分内部的帮助函数已经暴露给外部，可供外部直接导入使用。</p><h2 id="导入" tabindex="-1">导入 <a class="header-anchor" href="#导入" aria-label="Permalink to &quot;导入&quot;">​</a></h2><p>无论是全量引入还是按需引入，扩展工具包只能通过手动引入的方式进行注册。</p><p>这里只介绍部分包中的函数.</p><p>(推荐开启一个中间文件用于包裹各种导入函数，这样方便管理和区分)</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> util-helper.ts 这里是你自己定义的</span></span>
<span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#908CAA;">{</span><span style="color:#3E8FB0;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;"> </span><span style="color:#908CAA;">}</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">typeOf</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">util</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">typeOf</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">deepCopy</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">util</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">deepCopy</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">deepMerge</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">util</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">deepMerge</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">throttle</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">util</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">throttl</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">debounce</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">util</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">debounc</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">on</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">dom</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">on</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">off</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">dom</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">off</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">addClass</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">dom</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">addClass</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">removeClass</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">dom</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">removeClass</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">addResizeListener</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">resize</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">addResizeListener</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">removeResizeListener</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Utils</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">resize</span><span style="color:#3E8FB0;">.</span><span style="color:#E0DEF4;font-style:italic;">removeResizeListener</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 或者按分包进行导出也可.</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#357B42;font-style:italic;">// util-helper.ts 这里是你自己定义的</span></span>
<span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> { </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;"> } </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">typeOf</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">util</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">typeOf</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">deepCopy</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">util</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">deepCopy</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">deepMerge</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">util</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">deepMerge</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">throttle</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">util</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">throttl</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">debounce</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">util</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">debounc</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">on</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">dom</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">on</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">off</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">dom</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">off</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">addClass</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">dom</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">addClass</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">removeClass</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">dom</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">removeClass</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">addResizeListener</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">resize</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">addResizeListener</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">removeResizeListener</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Utils</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">resize</span><span style="color:#002339;">.</span><span style="color:#2F86D2;">removeResizeListener</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 或者按分包进行导出也可.</span></span></code></pre></div><h2 id="utils-util" tabindex="-1">Utils.util <a class="header-anchor" href="#utils-util" aria-label="Permalink to &quot;Utils.util&quot;">​</a></h2><p>通用工具包</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 更新标题</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">String</span><span style="color:#908CAA;font-style:italic;">}</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">title</span><span style="color:#6E6A86;font-style:italic;"> 标题</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">title</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">title</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 复制到剪切板</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">content</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">copy</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">content</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 打开新页面</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">String</span><span style="color:#908CAA;font-style:italic;">}</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">url</span><span style="color:#6E6A86;font-style:italic;"> 地址</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">target</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">open</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">url</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">target</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">false</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 日期格式化</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">time</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">cFormat</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">weekArray</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">parseTime</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">time</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">cFormat</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;{y}-{m}-{d} {h}:{i}:{s}&#39;</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">weekArray</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 获取区间范围，如近一周，近三个月，后一个月等</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">days</span><span style="color:#6E6A86;font-style:italic;"> 为负值时往前，正为之后的日期</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">mode</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">*</span><span style="color:#908CAA;font-style:italic;">}</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">rangeTime</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">days</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">mode</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;{y}-{m}-{d}&#39;</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 精准判断对象类型</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">obj</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">typeOf</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">obj</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 深拷贝</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">data</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">deepCopy</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">data</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 深度合并</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">target</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">merged</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">deepMerge</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">target</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">merged</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 在某个区间随机一个整数</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">min</span><span style="color:#6E6A86;font-style:italic;"> 最小值</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">max</span><span style="color:#6E6A86;font-style:italic;"> 最大值</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">return</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">number</span><span style="color:#908CAA;font-style:italic;">}</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">getRandomInt</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">min</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">max</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 打乱某个数组</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">return</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">number</span><span style="color:#908CAA;font-style:italic;">}</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">shuffle</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">arr</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 交换两个数组内容</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">return</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">number</span><span style="color:#908CAA;font-style:italic;">}</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">swap</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">arr</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">i</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">j</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 节流函数，(限制函数的执行频率)返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> *</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;">  </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">function</span><span style="color:#908CAA;font-style:italic;">}</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">func</span><span style="color:#6E6A86;font-style:italic;">        回调函数</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;">  </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">number</span><span style="color:#908CAA;font-style:italic;">}</span><span style="color:#6E6A86;font-style:italic;">   </span><span style="color:#E0DEF4;font-style:italic;">wait</span><span style="color:#6E6A86;font-style:italic;">        表示时间窗口的间隔</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">immediate</span><span style="color:#6E6A86;font-style:italic;"> 是否立即执行 true 则先调用，false不先调用</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">return</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">function</span><span style="color:#908CAA;font-style:italic;">}</span><span style="color:#6E6A86;font-style:italic;">             返回客户调用函数</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">throttle</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">func</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">wait</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">immediate</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 防抖函数，(限制函数的执行频率) 保证再一系列调用时间内，只调用一次</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> *</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;">  </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">function</span><span style="color:#908CAA;font-style:italic;">}</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">func</span><span style="color:#6E6A86;font-style:italic;">        回调函数</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;">  </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">number</span><span style="color:#908CAA;font-style:italic;">}</span><span style="color:#6E6A86;font-style:italic;">   </span><span style="color:#E0DEF4;font-style:italic;">wait</span><span style="color:#6E6A86;font-style:italic;">        表示时间窗口的间隔</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">return</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">function</span><span style="color:#908CAA;font-style:italic;">}</span><span style="color:#6E6A86;font-style:italic;">             返回客户调用函数</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">debounce</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">func</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">wait</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 判断是否是对象或数组</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">obj</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">boolean</span><span style="color:#908CAA;font-style:italic;">}</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">isObject</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">obj</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 判定对象数组相等</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">obj1</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">obj2</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">boolean</span><span style="color:#908CAA;font-style:italic;">}</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">isEqual</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">obj1</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">obj2</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 获取随机uuid</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">hasHyphen</span><span style="color:#6E6A86;font-style:italic;"> 是否有连接符</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">uuid</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">hasHyphen</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 更新标题</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{String}</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">title</span><span style="color:#357B42;font-style:italic;"> 标题</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">title</span><span style="color:#002339;">(</span><span style="color:#B1108E;">title</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 复制到剪切板</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">content</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">copy</span><span style="color:#002339;">(</span><span style="color:#B1108E;">content</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 打开新页面</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{String}</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">url</span><span style="color:#357B42;font-style:italic;"> 地址</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">target</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">open</span><span style="color:#002339;">(</span><span style="color:#B1108E;">url</span><span style="color:#002339;">, </span><span style="color:#B1108E;">target</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">false</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 日期格式化</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">time</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">cFormat</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">weekArray</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">parseTime</span><span style="color:#002339;">(</span><span style="color:#B1108E;">time</span><span style="color:#002339;">, </span><span style="color:#B1108E;">cFormat</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;{y}-{m}-{d} {h}:{i}:{s}&#39;</span><span style="color:#002339;">, </span><span style="color:#B1108E;">weekArray</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 获取区间范围，如近一周，近三个月，后一个月等</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">days</span><span style="color:#357B42;font-style:italic;"> 为负值时往前，正为之后的日期</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">mode</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{*}</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">rangeTime</span><span style="color:#002339;">(</span><span style="color:#B1108E;">days</span><span style="color:#002339;">, </span><span style="color:#B1108E;">mode</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;{y}-{m}-{d}&#39;</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 精准判断对象类型</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">obj</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">typeOf</span><span style="color:#002339;">(</span><span style="color:#B1108E;">obj</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 深拷贝</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">data</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">deepCopy</span><span style="color:#002339;">(</span><span style="color:#B1108E;">data</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 深度合并</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">target</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">merged</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">deepMerge</span><span style="color:#002339;">(</span><span style="color:#B1108E;">target</span><span style="color:#002339;">, </span><span style="color:#B1108E;">merged</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 在某个区间随机一个整数</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">min</span><span style="color:#357B42;font-style:italic;"> 最小值</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">max</span><span style="color:#357B42;font-style:italic;"> 最大值</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@return</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{number}</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">getRandomInt</span><span style="color:#002339;">(</span><span style="color:#B1108E;">min</span><span style="color:#002339;">, </span><span style="color:#B1108E;">max</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 打乱某个数组</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@return</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{number}</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">shuffle</span><span style="color:#002339;">(</span><span style="color:#B1108E;">arr</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 交换两个数组内容</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@return</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{number}</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">swap</span><span style="color:#002339;">(</span><span style="color:#B1108E;">arr</span><span style="color:#002339;">, </span><span style="color:#B1108E;">i</span><span style="color:#002339;">, </span><span style="color:#B1108E;">j</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 节流函数，(限制函数的执行频率)返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> *</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;">  </span><span style="color:#0444AC;font-style:italic;">{function}</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">func</span><span style="color:#357B42;font-style:italic;">        回调函数</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;">  </span><span style="color:#0444AC;font-style:italic;">{number}</span><span style="color:#357B42;font-style:italic;">   </span><span style="color:#2F86D2;">wait</span><span style="color:#357B42;font-style:italic;">        表示时间窗口的间隔</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">immediate</span><span style="color:#357B42;font-style:italic;"> 是否立即执行 true 则先调用，false不先调用</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@return</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{function}</span><span style="color:#357B42;font-style:italic;">             返回客户调用函数</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">throttle</span><span style="color:#002339;">(</span><span style="color:#B1108E;">func</span><span style="color:#002339;">, </span><span style="color:#B1108E;">wait</span><span style="color:#002339;">, </span><span style="color:#B1108E;">immediate</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 防抖函数，(限制函数的执行频率) 保证再一系列调用时间内，只调用一次</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> *</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;">  </span><span style="color:#0444AC;font-style:italic;">{function}</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">func</span><span style="color:#357B42;font-style:italic;">        回调函数</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;">  </span><span style="color:#0444AC;font-style:italic;">{number}</span><span style="color:#357B42;font-style:italic;">   </span><span style="color:#2F86D2;">wait</span><span style="color:#357B42;font-style:italic;">        表示时间窗口的间隔</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@return</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{function}</span><span style="color:#357B42;font-style:italic;">             返回客户调用函数</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">debounce</span><span style="color:#002339;">(</span><span style="color:#B1108E;">func</span><span style="color:#002339;">, </span><span style="color:#B1108E;">wait</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 判断是否是对象或数组</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">obj</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{boolean}</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isObject</span><span style="color:#002339;">(</span><span style="color:#B1108E;">obj</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 判定对象数组相等</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">obj1</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">obj2</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{boolean}</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isEqual</span><span style="color:#002339;">(</span><span style="color:#B1108E;">obj1</span><span style="color:#002339;">, </span><span style="color:#B1108E;">obj2</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 获取随机uuid</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">hasHyphen</span><span style="color:#357B42;font-style:italic;"> 是否有连接符</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">uuid</span><span style="color:#002339;">(</span><span style="color:#B1108E;">hasHyphen</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span></code></pre></div><h2 id="utils-resize" tabindex="-1">Utils.resize <a class="header-anchor" href="#utils-resize" aria-label="Permalink to &quot;Utils.resize&quot;">​</a></h2><p>resize 借助插件实现容器大小改变的响应实现,实际开发中也偶尔能用到</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#E0DEF4;font-style:italic;">ResizeObserver</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;resize-observer-polyfill&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/*</span><span style="color:#6E6A86;font-style:italic;"> istanbul ignore next </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">resizeHandler</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">entries</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/*</span><span style="color:#6E6A86;font-style:italic;"> istanbul ignore next </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">addResizeListener</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">element</span><span style="color:#3E8FB0;">:</span><span style="color:#E0DEF4;"> </span><span style="color:#9CCFD8;">HTMLElement</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">fn</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/*</span><span style="color:#6E6A86;font-style:italic;"> istanbul ignore next </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">removeResizeListener</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">element</span><span style="color:#3E8FB0;">:</span><span style="color:#E0DEF4;"> </span><span style="color:#9CCFD8;">HTMLElement</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">fn</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">ResizeObserver</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;resize-observer-polyfill&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/* istanbul ignore next */</span></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">resizeHandler</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">entries</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/* istanbul ignore next */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">addResizeListener</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">element</span><span style="color:#7B30D0;">:</span><span style="color:#002339;"> </span><span style="color:#0444AC;">HTMLElement</span><span style="color:#002339;">, </span><span style="color:#B1108E;">fn</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/* istanbul ignore next */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">removeResizeListener</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">element</span><span style="color:#7B30D0;">:</span><span style="color:#002339;"> </span><span style="color:#0444AC;">HTMLElement</span><span style="color:#002339;">, </span><span style="color:#B1108E;">fn</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span></code></pre></div><h2 id="utils-color" tabindex="-1">Utils.color <a class="header-anchor" href="#utils-color" aria-label="Permalink to &quot;Utils.color&quot;">​</a></h2><p>依赖colorjs包,封装部分用法函数</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 依赖color插件，在此基础上封装部分转换函数</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 参考文档说明：https://www.npmjs.com/package/color</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#E0DEF4;font-style:italic;">Color</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;color&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 调色板</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">getPalette</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">hex</span><span style="color:#E0DEF4;">()</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toLowerCase</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> active</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">darkColor1</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixBlack</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.1</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">darkColor2</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixBlack</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.2</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">darkColor3</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixBlack</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.3</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">darkColor4</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixBlack</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.4</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> light</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">lightColor1</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixWhite</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.2</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">lightColor2</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixWhite</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.4</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">lightColor3</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixWhite</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.6</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">lightColor4</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixWhite</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.8</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">lightColor5</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixWhite</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.9</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">lightColor6</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixWhite</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0.95</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> [</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">darkColor4</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">darkColor3</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">darkColor2</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">darkColor1</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">normalColor</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">lightColor1</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">lightColor2</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">lightColor3</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">lightColor4</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">lightColor5</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#E0DEF4;font-style:italic;">lightColor6</span></span>
<span class="line"><span style="color:#E0DEF4;">  ]</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> getObject</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">toObject</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">object</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> getHex</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">toHex</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">toLowerCase</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">true</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">hex</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">hex</span><span style="color:#E0DEF4;">()</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">toLowerCase</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">?</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">hex</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toLowerCase</span><span style="color:#E0DEF4;">() </span><span style="color:#3E8FB0;">:</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">hex</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> getRgbArr</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">toRgbArr</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">rgb</span><span style="color:#E0DEF4;">()</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">array</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> getHslArr</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">toHslArr</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">hsl</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> grayscale</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">grayscale</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">grayscale</span><span style="color:#E0DEF4;">()</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">/ 两个颜色值比较</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">isEqual</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color1</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">color2</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color1</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">() </span><span style="color:#3E8FB0;">===</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color2</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 是否是light</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">isLight</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">isLight</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 是否是light</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">isDark</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">isDark</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 混合色，浓度</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mix</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">mixColor</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">concentration</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">mix</span><span style="color:#E0DEF4;">(</span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">mixColor</span><span style="color:#E0DEF4;">)</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">concentration</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">hex</span><span style="color:#E0DEF4;">()</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toLowerCase</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 混合白色</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixWhite</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">concentration</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mix</span><span style="color:#E0DEF4;">(</span><span style="color:#F6C177;">&#39;#ffffff&#39;</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">concentration</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 混合黑色</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mixBlack</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">concentration</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">mix</span><span style="color:#E0DEF4;">(</span><span style="color:#F6C177;">&#39;#000000&#39;</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">concentration</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 透明度</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">alpha</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">alpha</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">alpha</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">alpha</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 渐隐</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">fade</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">fade</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">fade</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">fade</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 变轻</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">lighten</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">concentration</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">lighten</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">concentration</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 变深</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">darken</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">color</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">concentration</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">Color</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">color</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">darken</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">concentration</span><span style="color:#E0DEF4;">)</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 依赖color插件，在此基础上封装部分转换函数</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 参考文档说明：https://www.npmjs.com/package/color</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Color</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;color&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 调色板</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">getPalette</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">hex</span><span style="color:#002339;">().</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">().</span><span style="color:#7EB233;">toLowerCase</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// active</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">darkColor1</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixBlack</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.1</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">darkColor2</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixBlack</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.2</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">darkColor3</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixBlack</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.3</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">darkColor4</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixBlack</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.4</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// light</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">lightColor1</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixWhite</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.2</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">lightColor2</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixWhite</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.4</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">lightColor3</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixWhite</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.6</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">lightColor4</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixWhite</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.8</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">lightColor5</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixWhite</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.9</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">lightColor6</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixWhite</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">, </span><span style="color:#174781;">0.95</span><span style="color:#002339;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> [</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">darkColor4</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">darkColor3</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">darkColor2</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">darkColor1</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">normalColor</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">lightColor1</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">lightColor2</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">lightColor3</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">lightColor4</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">lightColor5</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#2F86D2;">lightColor6</span></span>
<span class="line"><span style="color:#002339;">  ]</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// getObject</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">toObject</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">object</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// getHex</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">toHex</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">, </span><span style="color:#B1108E;">toLowerCase</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">true</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">hex</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">hex</span><span style="color:#002339;">().</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">toLowerCase</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">?</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">hex</span><span style="color:#002339;">.</span><span style="color:#7EB233;">toLowerCase</span><span style="color:#002339;">() </span><span style="color:#7B30D0;">:</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">hex</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// getRgbArr</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">toRgbArr</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">rgb</span><span style="color:#002339;">().</span><span style="color:#7EB233;">array</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// getHslArr</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">toHslArr</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">hsl</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// grayscale</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">grayscale</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">grayscale</span><span style="color:#002339;">().</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/// 两个颜色值比较</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isEqual</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color1</span><span style="color:#002339;">, </span><span style="color:#B1108E;">color2</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color1</span><span style="color:#002339;">).</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">() </span><span style="color:#7B30D0;">===</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color2</span><span style="color:#002339;">).</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 是否是light</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isLight</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">isLight</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 是否是light</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isDark</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">isDark</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 混合色，浓度</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mix</span><span style="color:#002339;">(</span><span style="color:#B1108E;">mixColor</span><span style="color:#002339;">, </span><span style="color:#B1108E;">color</span><span style="color:#002339;">, </span><span style="color:#B1108E;">concentration</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">mix</span><span style="color:#002339;">(</span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">mixColor</span><span style="color:#002339;">), </span><span style="color:#2F86D2;">concentration</span><span style="color:#002339;">).</span><span style="color:#7EB233;">hex</span><span style="color:#002339;">().</span><span style="color:#7EB233;">toLowerCase</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 混合白色</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixWhite</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">, </span><span style="color:#B1108E;">concentration</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mix</span><span style="color:#002339;">(</span><span style="color:#A44185;">&#39;#ffffff&#39;</span><span style="color:#002339;">, </span><span style="color:#2F86D2;">color</span><span style="color:#002339;">, </span><span style="color:#2F86D2;">concentration</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 混合黑色</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mixBlack</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">, </span><span style="color:#B1108E;">concentration</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">mix</span><span style="color:#002339;">(</span><span style="color:#A44185;">&#39;#000000&#39;</span><span style="color:#002339;">, </span><span style="color:#2F86D2;">color</span><span style="color:#002339;">, </span><span style="color:#2F86D2;">concentration</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 透明度</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">alpha</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">, </span><span style="color:#B1108E;">alpha</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">alpha</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">alpha</span><span style="color:#002339;">).</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 渐隐</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">fade</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">, </span><span style="color:#B1108E;">fade</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">fade</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">fade</span><span style="color:#002339;">).</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 变轻</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">lighten</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">, </span><span style="color:#B1108E;">concentration</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">lighten</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">concentration</span><span style="color:#002339;">).</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 变深</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">darken</span><span style="color:#002339;">(</span><span style="color:#B1108E;">color</span><span style="color:#002339;">, </span><span style="color:#B1108E;">concentration</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#7EB233;">Color</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">color</span><span style="color:#002339;">).</span><span style="color:#7EB233;">darken</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">concentration</span><span style="color:#002339;">).</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#002339;">}</span></span></code></pre></div><h2 id="utils-dom" tabindex="-1">Utils.dom <a class="header-anchor" href="#utils-dom" aria-label="Permalink to &quot;Utils.dom&quot;">​</a></h2><p>dom 相关工具包</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 去除空格</span></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">trim</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">string</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 监听事件</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">on</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> (</span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">()</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span><span style="color:#E0DEF4;">)()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 移除事件</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">off</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> (</span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">()</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span><span style="color:#E0DEF4;">)()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 监听一次事件</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">once</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">el</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">event</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">fn</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 是否有class类名</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">hasClass</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">el</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">cls</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 添加class</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">addClass</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">el</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">cls</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 移除一个class样式</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">removeClass</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">el</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">cls</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> getStyle</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">getStyle</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">element</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">styleName</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 获取浏览器滚动条宽度</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">getScrollBarWidth</span><span style="color:#908CAA;">()</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> scrollTop animation</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">scrollTop</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">el</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">from</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">0</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">to</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">duration</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">500</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">endCallback</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 首字母大写</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">firstUpperCase</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">str</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#3E8FB0;">return</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">str</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()[</span><span style="color:#EA9A97;">0</span><span style="color:#E0DEF4;">]</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toUpperCase</span><span style="color:#E0DEF4;">() </span><span style="color:#3E8FB0;">+</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">str</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">toString</span><span style="color:#E0DEF4;">()</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">slice</span><span style="color:#E0DEF4;">(</span><span style="color:#EA9A97;">1</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 是否有滚动条</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">isScroll</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">el</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">isVertical</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 获取滚动容器</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">getScrollContainer</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">el</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">isVertical</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 阻止冒泡</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">stop</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">e</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">e</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">stopPropagation</span><span style="color:#E0DEF4;">()</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#357B42;font-style:italic;">// 去除空格</span></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">trim</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">string</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 监听事件</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">on</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#0991B6;">function</span><span style="color:#002339;"> () {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">})()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 移除事件</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">off</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#0991B6;">function</span><span style="color:#002339;"> () {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">})()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 监听一次事件</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">once</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">el</span><span style="color:#002339;">, </span><span style="color:#B1108E;">event</span><span style="color:#002339;">, </span><span style="color:#B1108E;">fn</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 是否有class类名</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">hasClass</span><span style="color:#002339;">(</span><span style="color:#B1108E;">el</span><span style="color:#002339;">, </span><span style="color:#B1108E;">cls</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 添加class</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">addClass</span><span style="color:#002339;">(</span><span style="color:#B1108E;">el</span><span style="color:#002339;">, </span><span style="color:#B1108E;">cls</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 移除一个class样式</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">removeClass</span><span style="color:#002339;">(</span><span style="color:#B1108E;">el</span><span style="color:#002339;">, </span><span style="color:#B1108E;">cls</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// getStyle</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">getStyle</span><span style="color:#002339;">(</span><span style="color:#B1108E;">element</span><span style="color:#002339;">, </span><span style="color:#B1108E;">styleName</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 获取浏览器滚动条宽度</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">getScrollBarWidth</span><span style="color:#002339;">() {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// scrollTop animation</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">scrollTop</span><span style="color:#002339;">(</span><span style="color:#B1108E;">el</span><span style="color:#002339;">, </span><span style="color:#B1108E;">from</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">0</span><span style="color:#002339;">, </span><span style="color:#B1108E;">to</span><span style="color:#002339;">, </span><span style="color:#B1108E;">duration</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">500</span><span style="color:#002339;">, </span><span style="color:#B1108E;">endCallback</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 首字母大写</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">firstUpperCase</span><span style="color:#002339;">(</span><span style="color:#B1108E;">str</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#7B30D0;">return</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">str</span><span style="color:#002339;">.</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">()[</span><span style="color:#174781;">0</span><span style="color:#002339;">].</span><span style="color:#7EB233;">toUpperCase</span><span style="color:#002339;">() </span><span style="color:#7B30D0;">+</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">str</span><span style="color:#002339;">.</span><span style="color:#7EB233;">toString</span><span style="color:#002339;">().</span><span style="color:#7EB233;">slice</span><span style="color:#002339;">(</span><span style="color:#174781;">1</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 是否有滚动条</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isScroll</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">el</span><span style="color:#002339;">, </span><span style="color:#B1108E;">isVertical</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 获取滚动容器</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">getScrollContainer</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">el</span><span style="color:#002339;">, </span><span style="color:#B1108E;">isVertical</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">// 阻止冒泡</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">stop</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#B1108E;">e</span><span style="color:#002339;"> </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">e</span><span style="color:#002339;">.</span><span style="color:#7EB233;">stopPropagation</span><span style="color:#002339;">()</span></span></code></pre></div><h2 id="utils-log" tabindex="-1">Utils.log <a class="header-anchor" href="#utils-log" aria-label="Permalink to &quot;Utils.log&quot;">​</a></h2><p>log 控制台打印函数,用于各种颜色的打印</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\docs\demo\Console\Demo.vue" relativepath="./demo/Console/Demo.vue"><section class="vitepress-demo-preview-preview"><!--[--><!--[--><div class="demo-button"><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->custom<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->default<!--]--></span></button><button class="bin-button bin-button--primary" type="button"><!----><span class="bin-button__content" style=""><!--[-->primary<!--]--></span></button><button class="bin-button bin-button--success" type="button"><!----><span class="bin-button__content" style=""><!--[-->success<!--]--></span></button><button class="bin-button bin-button--warning" type="button"><!----><span class="bin-button__content" style=""><!--[-->warning<!--]--></span></button><button class="bin-button bin-button--danger" type="button"><!----><span class="bin-button__content" style=""><!--[-->danger<!--]--></span></button></div><div class="demo-button"><button class="bin-button bin-button--primary" type="button"><!----><span class="bin-button__content" style=""><!--[--> primary-back <!--]--></span></button><button class="bin-button bin-button--success" type="button"><!----><span class="bin-button__content" style=""><!--[--> success-back <!--]--></span></button><button class="bin-button bin-button--warning" type="button"><!----><span class="bin-button__content" style=""><!--[--> warning-back <!--]--></span></button><button class="bin-button bin-button--danger" type="button"><!----><span class="bin-button__content" style=""><!--[--> danger-back <!--]--></span></button></div><div class="demo-button"><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->object - log<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->pretty - primary<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->pretty - success<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->pretty - warning<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->pretty - danger<!--]--></span></button></div><div class="demo-button"><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[--> 打印版本号连接 <!--]--></span></button></div><!--]--><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demo-button&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;default print&#39;, &#39;#df85ff&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">custom</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;default print&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">default</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;primary print&#39;, &#39;primary&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">primary</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;success&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;success print&#39;, &#39;success&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">success</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;warning&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;warning print&#39;, &#39;warning&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">warning</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;danger&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;danger print&#39;, &#39;danger&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">danger</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demo-button&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;primary print&#39;, &#39;primary&#39;, true)&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      primary-back</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;success&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;success print&#39;, &#39;success&#39;, true)&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      success-back</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;warning&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;warning print&#39;, &#39;warning&#39;, true)&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      warning-back</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;danger&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print(&#39;danger print&#39;, &#39;danger&#39;, true)&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      danger-back</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demo-button&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.print({ name: &#39;bin-ui&#39;, author: &#39;wang bin&#39; })&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">object - log</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.pretty(&#39;title&#39;, &#39;pretty print&#39;, &#39;primary&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">pretty - primary</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.pretty(&#39;title&#39;, &#39;pretty print&#39;, &#39;success&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">pretty - success</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.pretty(&#39;title&#39;, &#39;pretty print&#39;, &#39;warning&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">pretty - warning</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;Log.pretty(&#39;title&#39;, &#39;pretty print&#39;, &#39;danger&#39;)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">pretty - danger</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demo-button&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span></span>
<span class="line"><span style="color: #F6C177">        Log.printVersion(&#39;bin-ui-design&#39;, &#39;1.0.0&#39;, &#39;https://wangbin3162.github.io/bin-ui-design/&#39;)</span></span>
<span class="line"><span style="color: #F6C177">      &quot;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      打印版本号连接</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">Utils</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">Log</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">Utils</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">log</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">style</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #908CAA; font-style: italic">.</span><span style="color: #C4A7E7; font-style: italic">demo-button</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #9CCFD8">margin-bottom</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">10</span><span style="color: #3E8FB0">px</span><span style="color: #908CAA">;</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">style</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demo-button&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;default print&#39;, &#39;#df85ff&#39;)&quot;</span><span style="color: #002339">&gt;custom&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;default print&#39;)&quot;</span><span style="color: #002339">&gt;default&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;primary print&#39;, &#39;primary&#39;)&quot;</span><span style="color: #002339">&gt;primary&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;success&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;success print&#39;, &#39;success&#39;)&quot;</span><span style="color: #002339">&gt;success&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;warning&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;warning print&#39;, &#39;warning&#39;)&quot;</span><span style="color: #002339">&gt;warning&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;danger&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;danger print&#39;, &#39;danger&#39;)&quot;</span><span style="color: #002339">&gt;danger&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demo-button&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;primary print&#39;, &#39;primary&#39;, true)&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      primary-back</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;success&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;success print&#39;, &#39;success&#39;, true)&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      success-back</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;warning&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;warning print&#39;, &#39;warning&#39;, true)&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      warning-back</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;danger&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print(&#39;danger print&#39;, &#39;danger&#39;, true)&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      danger-back</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demo-button&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.print({ name: &#39;bin-ui&#39;, author: &#39;wang bin&#39; })&quot;</span><span style="color: #002339">&gt;object - log&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.pretty(&#39;title&#39;, &#39;pretty print&#39;, &#39;primary&#39;)&quot;</span><span style="color: #002339">&gt;pretty - primary&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.pretty(&#39;title&#39;, &#39;pretty print&#39;, &#39;success&#39;)&quot;</span><span style="color: #002339">&gt;pretty - success&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.pretty(&#39;title&#39;, &#39;pretty print&#39;, &#39;warning&#39;)&quot;</span><span style="color: #002339">&gt;pretty - warning&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;Log.pretty(&#39;title&#39;, &#39;pretty print&#39;, &#39;danger&#39;)&quot;</span><span style="color: #002339">&gt;pretty - danger&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demo-button&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;</span></span>
<span class="line"><span style="color: #A44185">        Log.printVersion(&#39;bin-ui-design&#39;, &#39;1.0.0&#39;, &#39;https://wangbin3162.github.io/bin-ui-design/&#39;)</span></span>
<span class="line"><span style="color: #A44185">      &quot;</span></span>
<span class="line"><span style="color: #002339">    &gt;</span></span>
<span class="line"><span style="color: #002339">      打印版本号连接</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">Utils</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">Log</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">Utils</span><span style="color: #002339">.</span><span style="color: #2F86D2">log</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">style</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #DF8618; font-style: italic">.demo-button</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #DC3EB7">margin-bottom</span><span style="color: #002339">: </span><span style="color: #174781">10</span><span style="color: #7B30D0">px</span><span style="color: #002339">;</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">style</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">description</span><span style="color:#6E6A86;font-style:italic;"> 返回这个样式的颜色值</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">{</span><span style="color:#9CCFD8;font-style:italic;">String</span><span style="color:#908CAA;font-style:italic;">}</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">type</span><span style="color:#6E6A86;font-style:italic;"> 样式名称 [ primary | success | warning | danger | text ]</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">typeColor</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">type</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;default&#39;</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">print</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">text</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">type</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;default&#39;</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">back</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">false</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">pretty</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">title</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">text</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">type</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;primary&#39;</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">primary</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">text</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">back</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">false</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">success</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">text</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">back</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">false</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">info</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">text</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">back</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">false</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">warning</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">text</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">back</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">false</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">danger</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">text</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">back</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">false</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">printVersion</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> (</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#E0DEF4;">}</span></span>
<span class="line"><span style="color:#E0DEF4;font-style:italic;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">log</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#E0DEF4;font-style:italic;">print</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#E0DEF4;font-style:italic;">pretty</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#E0DEF4;font-style:italic;">primary</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#E0DEF4;font-style:italic;">info</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#E0DEF4;font-style:italic;">success</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#E0DEF4;font-style:italic;">warning</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#E0DEF4;font-style:italic;">danger</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#E0DEF4;font-style:italic;">printVersion</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E0DEF4;font-style:italic;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">default</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">log</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E0DEF4;font-style:italic;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">throwError</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">scope</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">m</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"><span style="color:#E0DEF4;font-style:italic;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">throwWarn</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">scope</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">m</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;">--</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@description</span><span style="color:#357B42;font-style:italic;"> 返回这个样式的颜色值</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#0444AC;font-style:italic;">{String}</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">type</span><span style="color:#357B42;font-style:italic;"> 样式名称 [ primary | success | warning | danger | text ]</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">typeColor</span><span style="color:#002339;">(</span><span style="color:#B1108E;">type</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;default&#39;</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">print</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">text</span><span style="color:#002339;">, </span><span style="color:#B1108E;">type</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;default&#39;</span><span style="color:#002339;">, </span><span style="color:#B1108E;">back</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">false</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">pretty</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">title</span><span style="color:#002339;">, </span><span style="color:#B1108E;">text</span><span style="color:#002339;">, </span><span style="color:#B1108E;">type</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;primary&#39;</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">primary</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">text</span><span style="color:#002339;">, </span><span style="color:#B1108E;">back</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">false</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">success</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">text</span><span style="color:#002339;">, </span><span style="color:#B1108E;">back</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">false</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">info</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">text</span><span style="color:#002339;">, </span><span style="color:#B1108E;">back</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">false</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">warning</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">text</span><span style="color:#002339;">, </span><span style="color:#B1108E;">back</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">false</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">danger</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">text</span><span style="color:#002339;">, </span><span style="color:#B1108E;">back</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#174781;">false</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">printVersion</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=&gt;</span><span style="color:#002339;"> (</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"><span style="color:#2F86D2;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">log</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">print</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">pretty</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">primary</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">info</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">success</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">warning</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">danger</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">printVersion</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#2F86D2;">export</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">default</span><span style="color:#002339;"> </span><span style="color:#B1108E;">log</span></span>
<span class="line"></span>
<span class="line"><span style="color:#2F86D2;">export</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">throwError</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">scope</span><span style="color:#002339;">, </span><span style="color:#B1108E;">m</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"><span style="color:#2F86D2;">export</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">throwWarn</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">scope</span><span style="color:#002339;">, </span><span style="color:#B1108E;">m</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">//--</span></span>
<span class="line"><span style="color:#002339;">}</span></span></code></pre></div><h2 id="utils-helper" tabindex="-1">Utils.helper <a class="header-anchor" href="#utils-helper" aria-label="Permalink to &quot;Utils.helper&quot;">​</a></h2><p>辅助判断方法</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 随机一个id</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span><span style="color:#6E6A86;font-style:italic;"> id</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">generateId</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">()</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">Math</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">floor</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">Math</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">random</span><span style="color:#E0DEF4;">() </span><span style="color:#3E8FB0;">*</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">10000</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 是否是boolean</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">val</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">isBool</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">val</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">typeof</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">val</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">===</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;boolean&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 是否是number</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">val</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">isNumber</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">val</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">typeof</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">val</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">===</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;number&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 是否是string</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">val</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">isString</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">value</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">typeof</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">value</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">===</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;string&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 是否是HTMLElement</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">val</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">isHTMLElement</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">val</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 是否为空</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">isEmpty</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">val</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 查找数组元素</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">arr</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">pred</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">arrayFind</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">arr</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">pred</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">arr</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">find</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">pred</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 查找数组索引</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">arr</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">pred</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">arrayFindIndex</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">arr</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">pred</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">arr</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">findIndex</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">pred</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 清空计时器</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">val</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">clearTimer</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">timer</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 追加transition前缀</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">style</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">autoprefixer</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">style</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 根据.获取拼接路径</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">obj</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">paths</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">getValueByPath</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">obj</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">paths</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;&#39;</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 根据路径信息获取prop</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">obj</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">path</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">strict</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">getPropByPath</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">obj</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">path</span><span style="color:#908CAA;">,</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">strict</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 是否是IE</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">isIE</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">()</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 是否是Edge</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">isEdge</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">()</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 正则转换</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">value</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">escapeRegexpString</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">value</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;&#39;</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 是否存在entries</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">obj</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">entries</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">obj</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * ref解包</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">ref</span><span style="color:#6E6A86;font-style:italic;"> Refed value</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">$</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">ref</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span><span style="color:#6E6A86;font-style:italic;"> 是否是undefined </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">isUndefined</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">val</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 数组打乱</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">arr</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">arrayFlat</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">arr</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">function</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">deduplicate</span><span style="color:#908CAA;">(</span><span style="color:#C4A7E7;font-style:italic;">arr</span><span style="color:#908CAA;">)</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#908CAA;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * 实际值转换为数组</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">param</span><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#E0DEF4;font-style:italic;">arr</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> * </span><span style="color:#908CAA;font-style:italic;">@</span><span style="color:#3E8FB0;font-style:italic;">returns</span></span>
<span class="line"><span style="color:#6E6A86;font-style:italic;"> </span><span style="color:#908CAA;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#3E8FB0;">export</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;font-style:italic;">coerceTruthyValueToArray</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">arr</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=&gt;</span><span style="color:#E0DEF4;"> </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> --</span></span>
<span class="line"><span style="color:#908CAA;">}</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 随机一个id</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span><span style="color:#357B42;font-style:italic;"> id</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">generateId</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> () </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Math</span><span style="color:#002339;">.</span><span style="color:#7EB233;">floor</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">Math</span><span style="color:#002339;">.</span><span style="color:#7EB233;">random</span><span style="color:#002339;">() </span><span style="color:#7B30D0;">*</span><span style="color:#002339;"> </span><span style="color:#174781;">10000</span><span style="color:#002339;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 是否是boolean</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">val</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isBool</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#B1108E;">val</span><span style="color:#002339;"> </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">typeof</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">val</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">===</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;boolean&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 是否是number</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">val</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isNumber</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#B1108E;">val</span><span style="color:#002339;"> </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">typeof</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">val</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">===</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;number&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 是否是string</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">val</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isString</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#B1108E;">value</span><span style="color:#002339;"> </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">typeof</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">value</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">===</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;string&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 是否是HTMLElement</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">val</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isHTMLElement</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#B1108E;">val</span><span style="color:#002339;"> </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 是否为空</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isEmpty</span><span style="color:#002339;">(</span><span style="color:#B1108E;">val</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 查找数组元素</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">arr</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">pred</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">arrayFind</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">arr</span><span style="color:#002339;">, </span><span style="color:#B1108E;">pred</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">arr</span><span style="color:#002339;">.</span><span style="color:#7EB233;">find</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">pred</span><span style="color:#002339;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 查找数组索引</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">arr</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">pred</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">arrayFindIndex</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">arr</span><span style="color:#002339;">, </span><span style="color:#B1108E;">pred</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">arr</span><span style="color:#002339;">.</span><span style="color:#7EB233;">findIndex</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">pred</span><span style="color:#002339;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 清空计时器</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">val</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">clearTimer</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#B1108E;">timer</span><span style="color:#002339;"> </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 追加transition前缀</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">style</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">autoprefixer</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">style</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 根据.获取拼接路径</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">obj</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">paths</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">getValueByPath</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">obj</span><span style="color:#002339;">, </span><span style="color:#B1108E;">paths</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;&#39;</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 根据路径信息获取prop</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">obj</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">path</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">strict</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">getPropByPath</span><span style="color:#002339;">(</span><span style="color:#B1108E;">obj</span><span style="color:#002339;">, </span><span style="color:#B1108E;">path</span><span style="color:#002339;">, </span><span style="color:#B1108E;">strict</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 是否是IE</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isIE</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> () {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 是否是Edge</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isEdge</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> () {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 正则转换</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">value</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">escapeRegexpString</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> (</span><span style="color:#B1108E;">value</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;&#39;</span><span style="color:#002339;">) </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 是否存在entries</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">obj</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">entries</span><span style="color:#002339;">(</span><span style="color:#B1108E;">obj</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * ref解包</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">ref</span><span style="color:#357B42;font-style:italic;"> Refed value</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">$</span><span style="color:#002339;">(</span><span style="color:#B1108E;">ref</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/** 是否是undefined */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">isUndefined</span><span style="color:#002339;">(</span><span style="color:#B1108E;">val</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 数组打乱</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">arr</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">arrayFlat</span><span style="color:#002339;">(</span><span style="color:#B1108E;">arr</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">function</span><span style="color:#002339;"> </span><span style="color:#7EB233;">deduplicate</span><span style="color:#002339;">(</span><span style="color:#B1108E;">arr</span><span style="color:#002339;">) {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#357B42;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * 实际值转换为数组</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@param</span><span style="color:#357B42;font-style:italic;"> </span><span style="color:#2F86D2;">arr</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> * </span><span style="color:#0991B6;">@returns</span></span>
<span class="line"><span style="color:#357B42;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#7EB233;">coerceTruthyValueToArray</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#B1108E;">arr</span><span style="color:#002339;"> </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// --</span></span>
<span class="line"><span style="color:#002339;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-9f9999b2 data-v-61fb544c><!--[--><!--]--><!----><nav class="prev-next" data-v-61fb544c><div class="pager" data-v-61fb544c><a class="pager-link prev" href="/bin-ui-design/docs/common-css.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Previous page</span><span class="title" data-v-61fb544c>通用样式</span></a></div><div class="pager" data-v-61fb544c><a class="pager-link next" href="/bin-ui-design/docs/common-directive.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Next page</span><span class="title" data-v-61fb544c>组件指令</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-10b21a41 data-v-1c165e87><div class="container" data-v-1c165e87><!----><p class="copyright" data-v-1c165e87>MIT Licensed | Copyright © 2023-present bin-ui-design</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_calendar.md\":\"ed1fb758\",\"components_affix.md\":\"c7b107b7\",\"components_back-top.md\":\"a90798a3\",\"components_breadcrumb.md\":\"e45c7120\",\"components_badge.md\":\"a83e273c\",\"components_alert.md\":\"fce5ac8e\",\"components_contextmenu.md\":\"3a8ef142\",\"components_circle.md\":\"7c03ee32\",\"components_config-provider.md\":\"bbf6fd0c\",\"components_checkbox.md\":\"2cb0b537\",\"components_carousel.md\":\"501e54e7\",\"components_empty.md\":\"0f6ba589\",\"components_layout.md\":\"e372cf7d\",\"components_count-to.md\":\"4af99aa6\",\"components_loading-bar.md\":\"dac78d00\",\"components_desc.md\":\"e468461f\",\"components_scrollbar.md\":\"291e9d8e\",\"components_anchor.md\":\"9b9a5663\",\"components_card.md\":\"8f27d101\",\"components_divider.md\":\"b50c7752\",\"docs_changelog.md\":\"deb42a54\",\"components_color-picker.md\":\"67dfd5c6\",\"components_notice.md\":\"a4721004\",\"docs_introduction.md\":\"e33e2b29\",\"index.md\":\"554113db\",\"components_button.md\":\"c7f6d651\",\"components_page.md\":\"8728f48d\",\"components_split.md\":\"383fbbe8\",\"docs_jsx.md\":\"58e48e69\",\"components_collapse.md\":\"39f1c339\",\"components_input-number.md\":\"b95178ec\",\"docs_common-directive.md\":\"79801c01\",\"docs_color-design.md\":\"1674c3b9\",\"components_trend.md\":\"2b24adde\",\"components_message-box.md\":\"5ea759a2\",\"components_dropdown.md\":\"13a35e2a\",\"components_upload.md\":\"5e2cedc1\",\"components_rate.md\":\"35271357\",\"docs_import-on-demand.md\":\"ffd56fe6\",\"components_radio.md\":\"5fd31931\",\"components_switch.md\":\"473de9e1\",\"docs_usage-sfc.md\":\"4b699947\",\"docs_common-transition.md\":\"3e08447c\",\"docs_installation.md\":\"f27febf3\",\"components_image.md\":\"30431bac\",\"docs_custom-theme.md\":\"f26d8f9a\",\"components_popper.md\":\"5c9082ec\",\"components_message.md\":\"d61ecb84\",\"components_steps.md\":\"de125854\",\"components_space.md\":\"20f9ed13\",\"components_input.md\":\"37684c1c\",\"components_tag.md\":\"17b4b0b1\",\"components_loading.md\":\"822d7cf0\",\"components_time-picker.md\":\"ca9c42c9\",\"components_slider.md\":\"fa819be3\",\"components_menu.md\":\"7998f13c\",\"components_skeleton.md\":\"54c428ce\",\"components_select.md\":\"d96ed960\",\"components_drawer.md\":\"7520003f\",\"components_popover.md\":\"7a2b8b43\",\"components_timeline.md\":\"e9bdf997\",\"docs_common-css.md\":\"2b6e0566\",\"components_progress.md\":\"4a41caad\",\"components_icon.md\":\"e611d267\",\"docs_common-api.md\":\"34166aab\",\"components_cascader.md\":\"9ad54021\",\"components_tooltip.md\":\"18368c1a\",\"components_grid.md\":\"d5620c5c\",\"components_tabs.md\":\"67864029\",\"components_modal.md\":\"0d1f6c25\",\"components_date-picker.md\":\"e2b2057a\",\"components_form.md\":\"5d25e7cb\",\"components_table.md\":\"6af60abd\",\"components_tree.md\":\"d80b44bd\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"BIN-UI-DESIGN\",\"description\":\"A Compontnts Lib for Vue3\",\"base\":\"/bin-ui-design/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"siteTitle\":\"BIN-UI-DESIGN\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/docs/introduction\",\"activeMatch\":\"/docs/\"},{\"text\":\"组件\",\"link\":\"/components/button\",\"activeMatch\":\"/components/\"},{\"text\":\"生态系统\",\"items\":[{\"text\":\"资源\",\"link\":\"\"},{\"text\":\"bin-admin-pro\",\"link\":\"https://wangbin3162.github.io/bin-admin-pro/\",\"target\":\"_blank\"},{\"text\":\"bin-datav\",\"link\":\"https://wangbin3162.github.io/bin-datav\",\"target\":\"_blank\"},{\"text\":\"bin-datav-schema\",\"link\":\"https://wangbin3162.github.io/bin-datav-schema/\",\"target\":\"_blank\"},{\"text\":\"官方库v3\",\"link\":\"\"},{\"text\":\"bin-ui-next\",\"link\":\"https://wangbin3162.github.io/bin-ui-next/\",\"target\":\"_blank\"},{\"text\":\"bin-editor-next\",\"link\":\"https://wangbin3162.github.io/bin-editor-next/\",\"target\":\"_blank\"},{\"text\":\"bin-charts-next\",\"link\":\"https://wangbin3162.github.io/bin-charts-next/\",\"target\":\"_blank\"},{\"text\":\"官方库v2\",\"link\":\"\"},{\"text\":\"bin-ui\",\"link\":\"https://wangbin3162.github.io/bin-ui/\",\"target\":\"_blank\"},{\"text\":\"bin-ace-editor\",\"link\":\"https://wangbin3162.github.io/bin-ace-editor/\",\"target\":\"_blank\"},{\"text\":\"bin-charts\",\"link\":\"https://wangbin3162.github.io/bin-charts/\",\"target\":\"_blank\"},{\"text\":\"bin-tree-org\",\"link\":\"https://wangbin3162.github.io/bin-tree-org/\",\"target\":\"_blank\"},{\"text\":\"动画库\",\"link\":\"\"},{\"text\":\"bin-animation\",\"link\":\"https://wangbin3162.github.io/bin-animation/\",\"target\":\"_blank\"},{\"text\":\"bin-keyframe-animation\",\"link\":\"https://wangbin3162.github.io/bin-keyframe-animation/\",\"target\":\"_blank\"}]}],\"sidebar\":{\"/docs/\":[{\"text\":\"开始\",\"items\":[{\"text\":\"介绍\",\"link\":\"/docs/introduction\"},{\"text\":\"变更日志\",\"link\":\"/docs/changelog\"}]},{\"text\":\"快速上手\",\"items\":[{\"text\":\"安装\",\"link\":\"/docs/installation\"},{\"text\":\"在 SFC 中使用\",\"link\":\"/docs/usage-sfc\"},{\"text\":\"按需引入\",\"link\":\"/docs/import-on-demand\"}]},{\"text\":\"指南\",\"items\":[{\"text\":\"JSX & TSX\",\"link\":\"/docs/jsx\"},{\"text\":\"色彩设计\",\"link\":\"/docs/color-design\"},{\"text\":\"调整主题\",\"link\":\"/docs/custom-theme\"},{\"text\":\"通用样式\",\"link\":\"/docs/common-css\"},{\"text\":\"帮助函数\",\"link\":\"/docs/common-api\"},{\"text\":\"组件指令\",\"link\":\"/docs/common-directive\"},{\"text\":\"内置动画\",\"link\":\"/docs/common-transition\"}]}],\"/components/\":[{\"text\":\"通用组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-fire\\\"></i>图标<span>Icon</span>\",\"link\":\"/components/icon\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-Youtube\\\"></i>按钮<span>Button</span>\",\"link\":\"/components/button\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-creditcard\\\"></i>卡片<span>Card</span>\",\"link\":\"/components/card\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-interation\\\"></i>折叠面板<span>Collapse</span>\",\"link\":\"/components/collapse\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-line\\\"></i>分割线<span>Divider</span>\",\"link\":\"/components/divider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-down\\\"></i>下拉菜单<span>Dropdown</span>\",\"link\":\"/components/dropdown\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-tags\\\"></i>标签<span>Tag</span>\",\"link\":\"/components/tag\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-image\\\"></i>图片<span>Image</span>\",\"link\":\"/components/image\"}]},{\"text\":\"布局组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-layout\\\"></i>布局组件<span>Layout</span>\",\"link\":\"/components/layout\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore\\\"></i>栅格<span>Grid</span>\",\"link\":\"/components/grid\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-swap\\\"></i>间距<span>Space</span>\",\"link\":\"/components/space\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-block\\\"></i>分割面板<span>Split</span>\",\"link\":\"/components/split\"}]},{\"text\":\"数据录入组件 (14)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-edit-square\\\"></i>输入框<span>Input</span>\",\"link\":\"/components/input\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-shake\\\"></i>数字输入<span>InputNumber</span>\",\"link\":\"/components/input-number\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-plus-circle\\\"></i>单选框<span>Radio</span>\",\"link\":\"/components/radio\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-check-square\\\"></i>多选框<span>Checkbox</span>\",\"link\":\"/components/checkbox\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>开关<span>Switch</span>\",\"link\":\"/components/switch\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>选择器<span>Select</span>\",\"link\":\"/components/select\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-left\\\"></i>级联选择<span>Cascader</span>\",\"link\":\"/components/cascader\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar\\\"></i>日期选择器<span>DatePicker</span>\",\"link\":\"/components/date-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-time-circle\\\"></i>时间选择器<span>TimePicker</span>\",\"link\":\"/components/time-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-bg-colors\\\"></i>颜色选择器<span>ColorPicker</span>\",\"link\":\"/components/color-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-star\\\"></i>评分<span>Rate</span>\",\"link\":\"/components/rate\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>滑块<span>Slider</span>\",\"link\":\"/components/slider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-cloud-upload\\\"></i>上传<span>Upload</span>\",\"link\":\"/components/upload\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-reconciliation\\\"></i>表单<span>Form</span>\",\"link\":\"/components/form\"}]},{\"text\":\"数据展示组件 (9)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-branches\\\"></i>树结构<span>Tree</span>\",\"link\":\"/components/tree\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-table\\\"></i>表格<span>Table</span>\",\"link\":\"/components/table\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-read\\\"></i>分页<span>Page</span>\",\"link\":\"/components/page\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>描述<span>Desc</span>\",\"link\":\"/components/desc\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowdown\\\"></i>时间线<span>Timeline</span>\",\"link\":\"/components/timeline\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar-fill\\\"></i>日历<span>Calendar</span>\",\"link\":\"/components/calendar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore-fill\\\"></i>轮播<span>Carousel</span>\",\"link\":\"/components/carousel\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-orderedlist\\\"></i>数字动画<span>CountTo</span>\",\"link\":\"/components/count-to\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-up\\\"></i>趋势标记<span>Trend</span>\",\"link\":\"/components/trend\"}]},{\"text\":\"导航组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-pushpin\\\"></i>图钉<span>Affix</span>\",\"link\":\"/components/affix\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-attachment\\\"></i>锚点<span>Anchor</span>\",\"link\":\"/components/anchor\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-up\\\"></i>返回顶部<span>BackTop</span>\",\"link\":\"/components/back-top\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-right\\\"></i>面包屑<span>Breadcrumb</span>\",\"link\":\"/components/breadcrumb\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>加载条<span>Loading Bar</span>\",\"link\":\"/components/loading-bar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>菜单<span>Menu</span>\",\"link\":\"/components/menu\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-project\\\"></i>标签页<span>Tabs</span>\",\"link\":\"/components/tabs\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowright\\\"></i>步骤<span>Steps</span>\",\"link\":\"/components/steps\"}]},{\"text\":\"反馈组件 (13)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-error-fill\\\"></i>警告信息<span>Alert</span>\",\"link\":\"/components/alert\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>标记<span>Badge</span>\",\"link\":\"/components/badge\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-idcard\\\"></i>模态框<span>Modal</span>\",\"link\":\"/components/modal\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-message\\\"></i>消息提示<span>Message</span>\",\"link\":\"/components/message\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-mail\\\"></i>弹框提示<span>MessageBox</span>\",\"link\":\"/components/message-box\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-notification\\\"></i>通知<span>Notice</span>\",\"link\":\"/components/notice\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-info-circle\\\"></i>弹出提示<span>Tooltip</span>\",\"link\":\"/components/tooltip\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-question-circle\\\"></i>弹出信息<span>Popover</span>\",\"link\":\"/components/popover\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>抽屉<span>Drawer</span>\",\"link\":\"/components/drawer\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-sever-fill\\\"></i>骨架屏<span>Skeleton</span>\",\"link\":\"/components/skeleton\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-loading\\\"></i>加载<span>Loading</span>\",\"link\":\"/components/loading\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-hourglass\\\"></i>进度条<span>Progress</span>\",\"link\":\"/components/progress\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-redo\\\"></i>进度环<span>Circle</span>\",\"link\":\"/components/circle\"}]},{\"text\":\"内置组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>空状态<span>Empty</span>\",\"link\":\"/components/empty\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-container\\\"></i>滚动组件<span>Scrollbar</span>\",\"link\":\"/components/scrollbar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-center\\\"></i>弹层<span>Popper</span>\",\"link\":\"/components/popper\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>右键菜单<span>Contextmenu</span>\",\"link\":\"/components/contextmenu\"}]},{\"text\":\"配置组件 (1)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-setting\\\"></i>全局配置<span>ConfigProvider</span>\",\"link\":\"/components/config-provider\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wangbin3162/bin-ui-design\"}],\"footer\":{\"copyright\":\"MIT Licensed | Copyright © 2023-present bin-ui-design\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>